<template>
  <div class="weather-view">
    <div class="header"></div>

    <div class="left-top">
      <left-top></left-top>
    </div>
    <div class="left-bottom">
      <left-bottom></left-bottom>
    </div>

    <div class="center-bottom">
      <center-bottom></center-bottom>
    </div>

    <div class="right-top">
      <right-top></right-top>
    </div>
    <div class="right-center">
      <right-center></right-center>
    </div>
    <div class="right-bottom">
      <right-bottom></right-bottom>
    </div>
  </div>
</template>
<script setup lang="ts">
import CenterBottom from "@/components/center-bottom.vue";
import LeftBottom from "@/components/left-bottom.vue";
import LeftTop from "@/components/left-top.vue";
import RightBottom from "@/components/right-bottom.vue";
import RightCenter from "@/components/right-center.vue";
import RightTop from "@/components/right-top.vue";
</script>

<style lang="less" scoped>
.weather-view {
  width: 100%;
  height: 100%;
  position: absolute;

  background: #000 url("@/assets/img/background.8414d49a.png");
  background-size: 100% 100%;
  .header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 193px;
    background: url("@/assets/img/header.svg") center no-repeat;
  }
  .left-top {
    left: 30px;
    top: 146px;
    position: absolute;
    width: 450px;
    height: 604px;
  }
  .left-bottom {
    left: 30px;
    top: 792px;
    position: absolute;
    width: 450px;
    height: 258px;
  }
  .center-bottom {
    position: absolute;
    top: 792px;
    left: 520px;
    width: 890px;
    height: 258px;
  }
  .right-top {
    left: 1440px;
    top: 146px;
    position: absolute;
    width: 450px;
    height: 364px;
  }
  .right-center {
    left: 1440px;
    top: 531px;
    position: absolute;
    width: 450.5px;
    height: 230.5px;
  }
  .right-center {
    left: 1440px;
    top: 531px;
    position: absolute;
    width: 450.5px;
    height: 230.5px;
  }
  .right-bottom {
    left: 1440px;
    right: 30px;
    top: 792px;
    bottom: 30px;
    position: absolute;
    width: 450px;
    height: 258px;
  }
}
</style>
